<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2434716_iggunot1bz.css">
</head>

<body>
    <!-- user部分 -->
    <div class="user">
        <img src="./images/头像.png" alt="">
        <div class="userName">
            <h2>游客</h2>
            <p>登录后可同步VIP特权</p>
        </div>
        <div class="login">登录</div>
    </div>
    <!-- header部分 -->
    <header class="header">
        <div class="header_nav">
            <img src="./images/广告.jfif" alt="">
        </div>
        <div class="header_top">
            <h2>
                腾讯视频VIP
            </h2>
            <h2>
                超级影视VIP
            </h2>
        </div>
        <div class="header_mid">
            <h3>适用于非TV用户</h3>
            <a href="#">服务协议</a>
        </div>
        <!-- ad轮播图 -->
        <div class="ad">
            <!-- Swiper -->
            <div class="swiper-container1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <h2>连续包月首月</h2>
                        <p><i>￥</i>10</p>
                        <span>次月15元/月自动续费</span>
                    </div>
                    <div class="swiper-slide">
                        <h2>1个月</h2>
                        <p><i>￥</i>20</p>
                        <span>送1个月美团外卖会员</span>
                    </div>
                    <div class="swiper-slide">
                        <h2>连续包季</h2>
                        <p><i>￥</i>45</p>
                        <span>每季自动续费，可随时关闭</span>
                    </div>
                    <div class="swiper-slide">
                        <h2>连续包月首月</h2>
                        <p><i>￥</i>10</p>
                        <span>次月15元/月自动续费</span>
                    </div>
                    <div class="swiper-slide">
                        <h2>连续包月首月</h2>
                        <p><i>￥</i>10</p>
                        <span>次月15元/月自动续费</span>
                    </div>
                    <div class="swiper-slide">
                        <h2>连续包月首月</h2>
                        <p><i>￥</i>10</p>
                        <span>次月15元/月自动续费</span>
                    </div>
                    <div class="swiper-slide">
                        <h2>连续包月首月</h2>
                        <p><i>￥</i>10</p>
                        <span>次月15元/月自动续费</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="header_foot">
            <div class="discounts">
                <img src="./images/优惠券.png" alt="">
                <span>优惠券</span>
                <p>请先登录后查看优惠券</p>
            </div>
            <a href="#" class="open">立即以10元开通</a>
            <b>得100积分 + 150V力值</b>
        </div>
    </header>
    <!-- combo部分 -->
    <div class="combo">
        <div class="combo_head">
            <h3>VIP+套餐</h3>
            <a href="#">更多</a>
        </div>
        <div class="combo_foot">
            <!-- Swiper -->
            <div class="swiper-container2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./images/月卡.png" alt="">
                        <h2>VIP+美团</h2>
                        <span>购买</span>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/包月.png" alt="">
                        <h2>VIP+QQ</h2>
                        <span>购买</span>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/年卡.png" alt="">
                        <h2>VIP+京东</h2>
                        <span>购买</span>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/包月qq音乐.png" alt="">
                        <h2>VIP+QQ音乐</h2>
                        <span>购买</span>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/包月全民k歌.png" alt="">
                        <h2>VIP+全民K歌</h2>
                        <span>购买</span>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- nav部分 -->
    <nav class="nav">
        <h2>其它会员开通方式</h2>
        <div class="nav_content">
            <a href="#">
                <img src="./images/邀请好友有礼.png" alt="">
                <p>邀请好友有礼 <br>
                    <i>好友开通您得现金</i>
                </p>
            </a>
            <a href="#">
                <img src="./images/亲密付.png" alt="">
                <p>亲密付<br>
                    <i>帮亲友开通VIP</i>
                </p>
            </a>
            <a href="#">
                <img src="./images/兑换VIP.png" alt="">
                <p>兑换VIP/优惠券<br>
                    <i>cdkey券码兑换</i>
                </p>
            </a>
            <a href="#">
                <img src="./images/手机号内VIP兑换.png" alt="">
                <p>手机号内VIP兑换<br>
                    <i>手机号资产兑换</i>
                </p>
            </a>
            <a href="#">
                <img src="./images/赠送好友VIP.png" alt="">
                <p>赠送好友VIP<br>
                    <i>专属定制传心意</i>
                </p>
            </a>
            <a href="#">
                <img src="./images/赠送超级影视VIP.png" alt="">
                <p>赠送超级影视VIP <br>
                    <i>大屏观影更惬意</i>
                </p>
            </a>
        </div>
    </nav>
    <!-- VIP福利部分 -->
    <div class="welfare">
        <div class="welfare_top">
            <h2>VIP等级福利</h2>
            <a href="#">全部<i style="color: #333;">2项</i>福利</a>
        </div>
        <div class="welfare_content">
            <a href="#">
                <img src="./images/心动.jpg" alt="">
                <p>doki心跳特权</p>
                <div class="hot">
                    <span class="iconfont icon-huo">火热抢</span>
                    <i>查看</i>
                </div>
            </a>
            <a href="#">
                <img src="./images/草地.jpg" alt="">
                <p>草场地特权专区</p>
                <div class="hot">
                    <span class="iconfont icon-huo">火热抢</span>
                    <i>查看</i>
                </div>
            </a>
        </div>
    </div>
    <!-- VIP特权 -->
    <div class="privilege">
        <h2>VIP全部特权</h2>
        <!-- Swiper -->
        <div class="swiper-container3">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="privilege_top">
                        <img src="./images/并行下载.png" alt="">
                        <span>并行下载</span>
                    </div>
                    <div class="privilege_foot">
                        <h4>今日特权</h4>
                        <p>分批下载太耗时，高速并行更畅快！VIP并行下载，多个视频可同时缓存。</p>
                    </div>

                </div>
                <div class="swiper-slide">
                    <div class="privilege_top">
                        <p href="#">
                            <img src="./images/HD.png" alt="">
                            <span>1080P</span>
                        </p>
                        <i>畅享蓝光清晰度</i>
                    </div>
                    <div class="privilege_foot">
                        <p href="#">
                            <img src="./images/HD.png" alt="">
                            <span>1080P</span>
                        </p>
                        <i>享专属线下活动</i>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="privilege_top">
                        <p href="#">
                            <img src="./images/HD.png" alt="">
                            <span>1080P</span>
                        </p>
                        <i>畅享蓝光清晰度</i>
                    </div>
                    <div class="privilege_foot">
                        <p href="#">
                            <img src="./images/HD.png" alt="">
                            <span>1080P</span>
                        </p>
                        <i>享专属线下活动</i>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="privilege_top">
                        <p href="#">
                            <img src="./images/HD.png" alt="">
                            <span>1080P</span>
                        </p>
                        <i>畅享蓝光清晰度</i>
                    </div>
                    <div class="privilege_foot">
                        <p href="#">
                            <img src="./images/HD.png" alt="">
                            <span>1080P</span>
                        </p>
                        <i>享专属线下活动</i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 积分商城 -->
    <div class="integral">
        <div class="integral_head">
            <h3>积分商城</h3>
            <a href="#">更多</a>
        </div>
        <div class="integral_content">
            <a href="#">
                <img src="./images/登录商城.png" alt="">
                <span>登陆帐号，百余种好礼任你pick!</span>
            </a>
        </div>
        <div class="integral_foot">
            <!-- Swiper -->
            <div class="swiper-container4">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#"></a>
                        <p>良品铺子小野良品铺子小野良品铺子小野</p>
                        <span><i style="color: #f4711f;">249</i>积分</span>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"></a>
                        <p>2元话费直充券</p>
                        <span><i style="color: #f4711f;">300</i>积分</span>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"></a>
                        <p>三国群英钻石三国群英钻石三国群英钻石</p>
                        <span><i style="color: #f4711f;">70</i>积分</span>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"></a>
                        <p>良品铺子小野良品铺子小野良品铺子小野</p>
                        <span><i style="color: #f4711f;">249</i>积分</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- VIP活动 -->
    <div class="activity">
        <div class="activity_head">
            <h3>VIP活动</h3>
            <a href="#">更多</a>
        </div>
        <div class="activity_content">
            <a href="#">
                <img src="./images/VIP活动1.jpg" alt="">
                <span>VIP答题·赢补水精华液</span>
            </a>
            <a href="#">
                <img src="./images/VIP活动2.jpg" alt="">
                <span>VIP周刊精彩推荐</span>
            </a>
            <a href="#">
                <img src="./images/VIP活动3.jpg" alt="">
                <span>VIP+QQ音乐联合会员</span>
            </a>
            <a href="#">
                <img src="./images/VIP活动4.jpg" alt="">
                <span>VIP+美团外卖联合会员</span>
            </a>
        </div>
    </div>
    <!-- VIP会员新片 -->
    <div class="new">
        <div class="new_head">
            <h3>VIP会员新片</h3>
            <a href="#">更多</a>
        </div>
        <div class="new_content">
            <a href="#">
                <img src="./images/新片1.jpg" alt="">
                <span>追龙Ⅱ</span>
            </a>
            <a href="#">
                <img src="./images/新片2.jpg" alt="">
                <span>九龙不败</span>
            </a>
            <a href="#">
                <img src="./images/新片3.jpg" alt="">
                <span>妈阁是座城</span>
            </a>
        </div>
    </div>
    <!-- VIP帮助服务中心 -->
    <div class="serve">
        <div class="serve_head">
            <h3>VIP帮助服务中心</h3>
            <a href="#">更多</a>
        </div>
        <div class="serve_content">
            <a href="#">
                <img src="./images/管理续费.png" alt="">
                <span>CKD兑换</span>
            </a>
            <a href="#">
                <img src="./images/兑换VIP.png" alt="">
                <span>封号查询</span>
            </a>
            <a href="#">
                <img src="./images/封号查询.png" alt="">
                <span>管理续费</span>
            </a>
        </div>
        <ul class="serve_foot">
            <li>关于《陈情令》点播剧集购买成功无法播放的问题</li>
            <li>《陈情令》单点付费常见问题</li>
            <li>如何移除其它观看腾讯视频的设备？</li>
            <li>青少年守护模式介绍</li>
        </ul>
    </div>




    <script src="./js/flexible.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <!-- header -->
    <script>
        (function () {
            var swiper = new Swiper('.swiper-container1', {
                slidesPerView: 3.5,
                spaceBetween: 20,
            });
        })();
    </script>
    <!-- combo -->
    <script>
        (function () {
            var swiper = new Swiper('.swiper-container2', {
                slidesPerView: 3.5,
                spaceBetween: 20,
            });
        })();
    </script>
    <!-- privilege -->
    <script>
        var swiper = new Swiper('.swiper-container3', {
            slidesPerView: 'auto',
            spaceBetween: 0,
        });
    </script>
    <!-- integral -->
    <script>
        var swiper = new Swiper('.swiper-container4', {
            slidesPerView: 3.4,
            spaceBetween: 20,
        });
    </script>
</body>

</html>